<template>
  <div class="wx-box">
    <div class="wx-phone">
      <div class="phone-box">
        <div class="input-box">
          <input type="text" class="phone" placeholder="请输入手机号码" maxlength="11" v-model="phone"
                 v-on:input="checkIcon" @blur="inputBlur"/>
        </div>
        <div class="icon1" v-if="showIcon"><img src="../../images/icon_1.png" class="pic1" onclick="return false"/>
        </div>
        <div class="icon2" v-if="hideIcon"><img src="../../images/icon_2.png" class="pic1" onclick="return false"/>
        </div>
      </div>

      <div class="code-box">
        <div class="input-box">
          <input type="text" class="code-txt" placeholder="输入手机验证码" maxlength="6" v-model="code" @blur="inputBlur"/>
        </div>

        <timer-btn ref="timerBtn" class="code" v-on:run="sendCode"></timer-btn>
      </div>

      <div class="pwd-box">
        <div class="input-box">
          <input type="password" class="pwd-txt" placeholder="设置6-16位密码" maxlength="16" v-model="pwd"
                 @blur="inputBlur"/>
        </div>
      </div>
    </div>

    <div class="protocol-box" @click="protocol">点击登录表示同意<span class="protocol">《用户注册协议》</span></div>

    <div class="btn-box">
      <button type="button" class="login" @click="bindCustomerPhone">登录</button>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5'
  import phone from "../../components/phone"
  import {setSessionStore, getSessionStore, getUrlKey, setStore, getStore, getUserCookie} from "../../common/js/util"
  import {baseUrl} from "../../common/js/env"
  import code from '../../components/code/code'
  import Cookies from 'js-cookie'

  export default {
    data() {
      return {
        showIcon: false,
        hideIcon: false,
        phone: "",
        code: "",
        pwd: "",
        identity: "",
        showModal: true,
        token1: "",
        token2: "",
        openId: "",
        withdraw: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.openId = getUrlKey("id");
      this.withdraw = base64.decode(getStore("withdraw_sign")); //判断不同的用户
      this.getIdentity();
    },
    methods: {
      checkIcon() {//手机号icon
        let phone = this.phone;
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(phone.trim())) {
          this.showIcon = false;
          this.hideIcon = true;
        } else {
          this.showIcon = true;
          this.hideIcon = false;
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      checkPwd() {//校验密码
        let pwd = this.pwd;
        if (pwd == "") {
          this.$vux.toast.text("密码不能为空", "middle");
          return;
        } else if (pwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(pwd)) {
          this.$vux.toast.text("密码不能包含中文", "middle");
          return;
        } else if (pwd.length < 6 || pwd.length > 16) {
          this.$vux.toast.text("密码长度为6-16位");
          return;
        }
        return true;
      },
      checkPhone() {//校验手机号码
        let phone = this.phone;
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (phone == "") {
          this.$vux.toast.text("手机号码不能为空", "middle");
          return;
        }
        if (!reg.test(phone)) {
          this.$vux.toast.text("手机号码格式错误", "middle");
          return;
        }
        return true;
      },
      checkCode() {//校验验证码
        let reg = /^[0-9]*$/;
        let code = this.code;
        if (code == "") {
          this.$vux.toast.text("验证码不能为空", "middle");
          return;
        } else if (!reg.test(code)) {
          this.$vux.toast.text("验证码格式不正确", "middle");
          return;
        }
        return true;
      },
      protocol() {//协议
        this.$router.push("/protocol");
      },
      sendCode() {//获取验证码
        let phone = this.phone;
        if (this.checkPhone()) {
          this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=6").then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0 && resultObj.data != null) {
              this.token1 = resultObj.data;
              this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=6" + "&userToken=" + this.token1).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0) {
                  this.token2 = resultObj.data;
                  this.$refs.timerBtn.start(); //启动倒计时
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  this.$refs.timerBtn.stop();
                }
              }).catch(function (error) {
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      bindCustomerPhone() {//绑定微信客户手机号
        let phone = this.phone;
        let pwd = this.pwd;
        if (this.checkPhone(phone) && this.checkCode() && this.checkPwd(pwd)) {
          this.$vux.loading.show({
            text: '加载中',
          });
          this.axios.get(baseUrl + "/login/mate_code?phone=" + phone + "&i=6&code=" + this.code + "&token=" + this.token2).then((res) => {
            let mateObj = res.data;
            if (mateObj.code == 0) {
              //绑定微信手机
              this.axios.get(baseUrl + "/wx_user/set_phone?sgin=" + this.openId + "&userName=0fc23ce3bc0e1ee5e5e" + "&type=0" + "&phone=" + phone + "&password=" + md5(pwd) + "&upIdentity=" + this.identity).then((res) => {
                let resultObj = res.data;
                this.$vux.loading.hide();
                if (resultObj.code == 0 && resultObj.data == 1) {
                  this.initWxLogin();
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                }
              }).catch(() => {
                this.$vux.loading.hide();
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.loading.hide();
              this.$vux.toast.text(mateObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      initWxLogin() {
        let base64 = require('js-base64').Base64;
        let userCookie = document.cookie;
        setSessionStore("userCookie", userCookie);
        let userInfo = getUserCookie();
        setSessionStore("user_sign", base64.encode(userInfo.userId));
        setSessionStore("recruit_sign", 1);//分享链接-进招工详情标识
        setStore("withdraw_sign", base64.encode(userInfo.userId));//验证不同用户登录后提现密码次数的问题

        if (userInfo.userId != this.withdraw) { //不是当前用户清除十分钟次数和cookie的时间
          localStorage.removeItem("sess_time_local");
          Cookies.remove("sess_time_local", "", {
            expires: -1,
            path: ''
          })
        }

        setSessionStore("recruit_sign", 1);//分享链接-进招工详情标识
        if (getSessionStore("workdetail_sign") == "001155") {
          this.$router.push({path: '/recruitdetail', query: {id: getSessionStore("referralWorkId")}});
        } else if (getSessionStore("cheer_sign") == "001188") {
          this.$router.push({path: '/referral', query: {interviewId: getSessionStore("referralInterviewId")}});
        } else {
          this.$router.replace('/index');
        }
      },
      getIdentity() {//获取identity
        if (this.identity != "" && this.identity != null && this.identity != undefined) {//若存在更新identity，不存在就取缓存
          setSessionStore("upIdentity", this.identity);
        }
        this.identity = getSessionStore("upIdentity");
      }
    },
    components: {
      "v-phone": phone,
      'timer-btn': code
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .wx-box
    wh(100%, 100%)
    overflow: hidden
    .wx-phone
      display: flex
      flex-direction: column
      margin-top: 0.533rem
      margin-bottom: 0.427rem
      .phone-box
        display: flex
        align-items: center
        wh(94.4%, 1.2rem)
        margin-left: 0.56rem
        border-bottom: 0.027rem solid #E6E6E6
        .input-box
          display: flex
          align-items: center
          wh(80%, 1.2rem)
          .phone
            line-height: 0.6rem
            size-color(0.427rem, rgba(169, 169, 169, 1))
        .icon1
          margin-left: auto
          margin-right: 0.56rem
          wh(0.533rem, 0.533rem)
        .icon2
          margin-left: auto
          margin-right: 0.56rem
          wh(0.507rem, 0.507rem)
        .pic1
          wh(100%, 100%)

      .code-box
        display: flex
        align-items: center
        wh(94.4%, 1.2rem)
        margin-top: 0.267rem
        margin-left: 0.56rem
        border-bottom: 0.027rem solid #E6E6E6
        .input-box
          display: flex
          align-items: center
          wh(60%, 1.2rem)
          .code-txt
            line-height: 0.6rem
            size-color(0.427rem, rgba(169, 169, 169, 1))
        .code
          margin-left: auto
          margin-right: 0.56rem
          wh(2.6rem, 0.72rem)
          line-height: 0.72rem
          border: 0.027rem solid rgba(60, 175, 255, 1)
          border-radius: 0.347rem
          size-color(0.373rem, rgba(60, 175, 255, 1))
          background: #FFFFFF

      .pwd-box
        display: flex
        align-items: center
        wh(94.4%, 1.2rem)
        margin-top: 0.267rem
        margin-left: 0.56rem
        border-bottom: 0.027rem solid #E6E6E6
        .input-box
          display: flex
          align-items: center
          wh(80%, 1.2rem)
          .pwd-txt
            line-height: 0.6rem
            size-color(0.427rem, rgba(169, 169, 169, 1))

    .protocol-box
      display: flex
      margin-left: 0.56rem
      size-color(0.32rem, rgba(146, 146, 146, 1))
      .protocol
        color: #3CAFFF
    .btn-box
      margin-top: 1.133rem
      wh(100%, 1.28rem)
      text-align: center
      .login
        wh(90.4%, 1.28rem)
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        border-radius(0.107rem)
        size-color(0.48rem, rgba(255, 255, 255, 1))
</style>
